
// class Magn{
//     constructor(){
//         this.smill = document.querySelector('.smlbox');
//         this.zhe = document.querySelector('.sml');
//         this.big = document.querySelector('magn');
//         this.datu = document.quetySelector('.magn img');
//         this.init();
//         this.addEvent();
//     }
//     init(){}
//     addEvent(){
//         //鼠标进入小盒子
//         const that = this;
//         this.smill.addEventListener('mouseenter',function(){
//             that.show();
//         })
//             //鼠标进入小盒子时，遮罩和大盒子出现
//         //移动
//         this.smill.addEventListener('mousemove',function(event){
//             const e = eve || event;
//             let ops = {
//                 x:e.offsetX,
//                 y:e.offsetY
//             }
//             that.move();
//         })
//             //遮罩层随着鼠标移动，大图随着遮罩层（相关比例）位置变化
//         //鼠标离开小盒子
//             //遮罩和大盒子都消失
//         this.smill.addEventListener('mouseleave',function(){
//             that.hide();
//         })
        
//     }
//     show(){
//         this.zhe.style.display = 'block';
//         this.big.style.display = 'block';
//     }                                  
//     hide(){
//         this.zhe.style.display  = 'none';
//         this.big.style.display = 'none';
//     }
//     move(){

//     }
// }











class Mag {
    constructor(eve){
        this.sml = document.querySelector('.sml');
        this.magn = document.querySelector('.magn');
        this.smlbox = document.querySelector('.smlbox');
        this.magimg = document.querySelector('.magn img');
        this.com= document.querySelector('.comm-one')
        this.addEvent();
    }
    addEvent(){
        let that = this;
        this.smlbox.addEventListener('mouseenter',function(){
            that.show();
            
        })
        this.smlbox.addEventListener('mouseleave',function(){
            that.hide();
        })
        this.smlbox.addEventListener('mousemove',function(eve){
            const e = eve || window.event;
            const ops = {
                X : e.offsetX,
                Y: e.offsetY
            }
            that.move(ops);
        })
    }
    show(){
        this.sml.style.display  = 'block';
        this.magn.style.display = 'block';
        console.log(8)
        this.init();
        console.log(0)
    }
    hide(){
        this.sml.style.display  = 'none';
        this.magn.style.display = 'none';
    }
    move(ops){
        let x = ops.X - this.sml.offsetWidth / 2;
        let y = ops.Y -this.sml.offsetHeight / 2;
        this.sml.style.left = x + 'px';
        this.sml.style.top = y + 'px';
        if(x <= 0){
            this.sml.style.left = 0;
          
        }else if(x>=this.smlbox.offsetWidth-this.sml.offsetWidth){
            this.sml.style.left= this.smlbox.offsetWidth-this.sml.offsetWidth + 'px';
        }
        if(y <= 0){
            this.sml.style.top = 0;
          
        }else if(y>=this.smlbox.offsetHeight-this.sml.offsetHeight){
            this.sml.style.top= this.smlbox.offsetHeight-this.sml.offsetHeight + 'px';
        }
        
        this.magimg.style.left = -(x/this.smlbox.offsetWidth-this.sml.offsetWidth) *( this.magimg.offsetWidth-this.magn.offsetWidth) + 'px';
        this.magimg.style.top =- (y/this.smlbox.offsetHeight-this.sml.offsetHeight) * (this.magimg.offsetHeight-this.magn.offsetHeight) + 'px';

    }
    init(){
        this.sml.style.width = (this.magimg.style.offsetWidth/this.magn.style.offsetWidth)*this.smlbox.offsetWidth +'px';
        this.sml.style.height = (this.magimg.style.offsetHeight/this.magn.style.offsetHeight)*this.smlbox.offsetHeight +'px';
        console.log(10)
    }
}
new Mag();